<template>
	<div id="content">
		   <el-card style="max-width: 1080px">
		      <template #header>
		        <div class="card-header">
		          <span>用户管理</span>
				  <br>
				  <el-button type="priprary" @click="add">点击出现数据</el-button>
		        </div>
		      </template>
			  <el-table :data="tableData" style="width: 100%">
			      <el-table-column prop="id" label="序号" width="180" />
			      <el-table-column prop="name" label="姓名" width="180" />
			      <el-table-column prop="email" label="邮箱" width="180"/>
				  <el-table-column prop="avatar" label="头像" width="180">
				  			<template #default="scope">
				  				<el-image :src="scope.row.avatar" fit="fill" style="height:50px;width:50px">
									
								</el-image>
				  			</template>
				  </el-table-column>
				  <el-table-column prop="count" label="数量" width="180">
						<template #default="scope">
							<el-tag v-if="scope.row.count<=11">库存不足</el-tag>
						</template>
				  </el-table-column>
				  <el-table-column label="删除" width="180">
						<template #default="scope">
							<el-button type="danger" @click=del(scope.$index,scope.row)>删除</el-button>
						</template>
				  </el-table-column>
			    </el-table>
				<template #footer>
				  <div class="card-footer">
					 <el-pagination size="small" layout="prev, pager, next" :total="20" @current-change="change" />
				  </div>
				</template>
		    </el-card>
	</div>
</template>
<script setup>
	import { ElMessage } from "element-plus"
	import {ref} from "vue"
	const tableData=ref([])
	// 总数据量
	const total = ref(tableData.value.length);
	// 每页显示的数据量
	const pageSize = ref(5);

	const add=()=>{
		fetch("http://localhost:3000/users").then(res=>res.json()).then(data=>{
			tableData.value=data
		})
	}
	const del=(index,row)=>{
		tableData.value.splice(index,1)
	}
	const change=(number)=>{
			tableData.value.filter(item=>{
				let num=ref()
				num=number*pageSize.value
				tableData=tableData.value
			})
			 ElMessage({
			    message: '跳转成功',
			    type: 'success',
			  })
			
			 
			
	}
</script>
<style scoped>
	#content{
		display:flex;
		justify-content: center;
	}
</style>